<template>
  <div class="contact-container" v-if="config && windowWidth >992">
    <div id="crumbs" class="max-1200">
      <img src="@/assets/icon/weizhi.png" alt="" class="ic"/>
      <a href="/admin">{{
          globalLanguage.languageSuffix == "Cn" ? "首页" : "Главная страница"
        }}</a>
      &gt;
      <router-link to="/contant">{{
          globalLanguage.languageSuffix == "Cn" ? "联系我们" : "Свяжитесь с нами"
        }}
      </router-link>
    </div>
    <div class="info max-1200">
      <h3
          class="line-height-4"
          style="
          box-sizing: border-box;
          font-family: Montserrat, -apple-system, BlinkMacSystemFont;
        "
      >
        <span style="font-size: 24px;">
<!--          {{globalLanguage.languageSuffix == "Cn" ? "风速达(广州)进出口贸易有限公司(广州总部)" : "Fengsheida (Гуанчжоу) Import and Export Trade Co., Ltd. (штаб - квартира в Гуанчжоу)" }}-->
          <el-input v-model="config['enterprisename'+ globalLanguage.languageSuffix].v" placeholder="请输入公司名称" size="large" style="width: 400px"></el-input>
          <el-button type="success" @click="changeconfigmap(config['enterprisename'+ globalLanguage.languageSuffix])" style="margin-left: 10px">{{ globalLanguage.languageSuffix == "Cn" ?"修改":"Изменить"}}</el-button>
        </span>
      </h3>
      <p><br/></p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
<!--        <strong style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "联系人" : "Контактные лица" }}</strong>：{{ globalLanguage.languageSuffix == "Cn" ? "陈先生" : "Mr. Chen" }}-->

        <strong style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "联系人" : "Контактные лица" }}</strong>：<el-input v-model="config['contacts'+ globalLanguage.languageSuffix].v" placeholder="请输入联系人" style="width: 300px" size="large"></el-input>
          <el-button type="success" @click="changeconfigmap(config['contacts'+ globalLanguage.languageSuffix])" style="margin-left: 10px">{{  globalLanguage.languageSuffix == "Cn" ?"修改":"Изменить"}}</el-button>
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "电话" : "Телефон" }}</strong>：
        <el-input v-model="config['phone'].v" placeholder="请输入电话号码" style="width: 300px" size="large"></el-input>
          <el-button type="success" @click="changeconfigmap(config['phone'])" style="margin-left: 10px">{{  globalLanguage.languageSuffix == "Cn" ?"修改":"Изменить"}}</el-button>
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "手机" : "Мобильные телефоны" }}</strong>：
        <el-input v-model="config['tel'].v" placeholder="请输入手机号码" style="width: 300px" size="large"></el-input>
          <el-button type="success" @click="changeconfigmap(config['tel'])" style="margin-left: 10px">{{  globalLanguage.languageSuffix == "Cn" ?"修改":"Изменить"}}</el-button>
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "邮箱" : "Почтовый ящик" }}</strong
        >：
        <el-input v-model="config['email'].v" placeholder="请输入邮箱地址" style="width: 300px" size="large"></el-input>
          <el-button type="success" @click="changeconfigmap(config['email'])" style="margin-left: 10px">{{  globalLanguage.languageSuffix == "Cn" ?"修改":"Изменить"}}</el-button>
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "广州总部" : "Штаб - квартира в Гуанчжоу" }}</strong
        >：
        <el-input v-model="config['address'+ globalLanguage.languageSuffix].v" placeholder="请输入公司地址" style="width: 300px" size="large"></el-input>
          <el-button type="success" @click="changeconfigmap(config['address'+ globalLanguage.languageSuffix])" style="margin-left: 10px">{{  globalLanguage.languageSuffix == "Cn" ?"修改":"Изменить"}}</el-button>
      </p>
      <h3
          class="line-height-4"
          style="white-space: normal; box-sizing: border-box"
      >
        <span style="font-size: 24px"><br/></span>
      </h3>
      <!-- <h3
        class="line-height-4"
        style="white-space: normal; box-sizing: border-box"
      >
        <span style="font-size: 24px"
          >风速达(广州)进出口贸易有限公司（莫斯科分部）</span
        >
      </h3>
      <p>
        <span style="font-size: 24px"><br /></span>
      </p>
      <p>
        <strong><span style="font-size: 16px">联系人</span></strong
        ><span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            >：Анатолий</span
          ></span
        >
      </p>
      <p>
        <span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            ><br /></span
        ></span>
      </p>
      <p>
        <span style="font-size: 16px"
          ><strong
            style="
              color: rgb(33, 37, 41);
              white-space: normal;
              box-sizing: border-box;
            "
            >电话</strong
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            >：<span style="font-family: ">+79775888889</span></span
          ></span
        >
      </p>
      <p>
        <span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            ><span style="font-family: "><br /></span></span
        ></span>
      </p>
      <p>
        <span style="font-size: 16px"
          ><strong
            style="
              color: rgb(33, 37, 41);
              white-space: normal;
              box-sizing: border-box;
            "
            >邮箱</strong
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            >：esudagz@yandex.ru</span
          ></span
        >
      </p>
      <p>
        <span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            ><br /></span
        ></span>
      </p>
      <p>
        <span style="font-size: 16px"
          ><strong>地址</strong>：Москва, ул. Ибрагимова, 31. Бизнес центр
          РТС&nbsp; Офис 305</span
        >
      </p> -->
      <p><br/></p>
      <p><br/></p>
      <p><br/></p>

    </div>
  </div>
  <div class="mbppp" v-else-if="config && windowWidth <= 992">
    <div class="map">
<!--      <iframe src="/template/web/default/article/map.html" frameborder="0"></iframe>-->
    </div>
    <!--面包屑 -->
    <el-breadcrumb separator="/" style="padding: 20px">
      <el-breadcrumb-item :to="{ path: '/admin' }">{{ globalLanguage.languageSuffix == 'Cn' ? '首页' : 'главная' }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ globalLanguage.languageSuffix == 'Cn' ? '联系我们' : 'контакты' }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="infogz">
      <h3 class="line-height-4">
        {{globalLanguage.languageSuffix == "Cn" ? '风速达(广州)风速达货运代理有限公司（广州总部）' : 'FengSuDa-компания(Гуанчжоу)'}}
      </h3>

      <div class="info">
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix =='Cn' ? '联系人：' : 'Contact：' }}</strong>
          <span>{{ globalLanguage.languageSuffix == 'Cn' ? '陈先生' : 'Mr. Chen' }}</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '电话：' : 'Phone：' }}</strong>
          <span>13600008684</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '手机:' : 'Tel:' }}</strong>
          <span>13600008684</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '邮箱:' : 'Email:' }}</strong>
          <span>blackjack2831@126.com</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '总部:' : 'Address:' }}</strong>
          <span>{{
              globalLanguage.languageSuffix == 'Cn' ? '广州市白云区松洲街高桥路三街25号103室' : 'Room 103, No. 25, Third Street, Gaoqiao Road, Songzhou Street, Baiyun District, Guangzhou City'
            }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {finconfigmap, updateConfigMap} from "@/api/index.js";
import {ElMessage} from "element-plus";
const config = ref(null); // 用于存储配置信息
const windowWidth = ref(window.innerWidth); // 用于判断当前窗口宽度
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

/*configmap的修改配置信息*/
const changeconfigmap = async (data) => {
  try {
    const response = await updateConfigMap(data);
    ElMessage.success("修改配置成功")
    console.log(response);
    getList();
  } catch (error) {
    console.error("修改配置失败:", error);
  }
}

const getList = async () => {
  try {
    const data = await finconfigmap();
    let aa = {}
    for (let item of data.configMapList) {
      aa[item.k] = {
        v: item.v,
        id: item.id
      };
    }
    config.value = aa;
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};
getList();

onMounted(() => {
  // 初始化 windowWidth
  windowWidth.value = window.innerWidth;
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

</script>

<style scoped>
.contact-container .info {
  padding: 3.125rem 0 11.25rem;
}
.map {
  margin-top: -65px !important;
  width: 100%;
  height: 200px;
  background: url("@/assets/img/map.png") no-repeat center;
  background-size: cover;
}
.infogz {
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.infogz .info {
  margin-top: 10px;
}

.infogz .line-height-4 {
  font-size: 22px;
  width: 100%;
  line-height: 1.5;
  text-align: left;
}

.info-item {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 0;
  margin-bottom: 1rem;
  color: rgb(33, 37, 41);
  white-space: normal;
  background-color: rgb(255, 255, 255);
  font-size: 12px;
}

.info-item strong {
  min-width: 70px; /* 设置最小宽度 */
  text-align: left; /* 左对齐 */
}

.info-item span {
  margin-left: 5px; /* 设置间隔 */
}
</style>
